<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../inc/js.jsp"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>权限管理</title>
    <jsp:include page="../inc/css.jsp"/>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <jsp:include page="../inc/menu.jsp"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card" style="margin-top: 10px">
                        <!-- /.card-header -->
                        <div class="card-header">
                            <button type="button" title="新增角色" class="btn btn-success" onclick="_powerList.fn.addInfo()">新增角色</button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables" style="width: 99%">
                                    <colgroup>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>角色名称</th>
                                        <th>关联账号数</th>
                                        <th style="width: 150px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
</div>
<!-- ./wrapper -->

<%--修改的modal --%>
<div class="modal inModal fade" id="roleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">角色详情</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form role="form" class="form-inline" enctype="multipart/form-data">
                    <input type="hidden" id="roleId"/>

                    <div class="form-group">
                        <label class="col-6">名称：</label>

                        <div class="col-6">
                            <input type="text" id="roleName" maxlength="20" class="form-control" style="height: 32px;width: 200px"/>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="courseSaveBtn_update" class="btn btn-primary" onclick="_powerList.fn.saveInfo()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inModal fade" id="powerModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑权限</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="hiddenRoleId"/>
                <form role="form" class="form-inline" id="powerForm"></form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="_powerList.fn.savePowerInfo()">修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- page script -->
<script type="text/javascript">
    let _powerList = {
        v: {
            list: [],
            dTable: null,
            date: null
        },
        fn: {
            init: function () {
                _powerList.fn.dataTableInit();
            },
            dataTableInit: function () {
                _powerList.v.dTable = $tutu.dataTable($('#dataTables'), {
                    "processing": true,
                    "serverSide": true,
                    "autoWidth": true,//自动计算宽度
                    "lengthChange": false,//是否允许角色改变表格每页显示的记录数
                    "searching": false,
                    "ordering": false,
                    "ajax": {
                        "url": "backend/power/list",
                        "type": "POST"
                    },
                    "language": $tutu.v.dataTableL,
                    "columns": [
                        {"data": "name"},
                        {"data": "count"},
                        {"data": ""}
                    ],
                    "columnDefs": [
                        {
                            "data": null,
                            "defaultContent": "<button type='button' title='编辑' class='btn btn-primary btn-sm edit'>" +
                                "<i class='fa fa-edit'></i>" +
                                "</button>" +
                                "&nbsp;&nbsp;" +
                                "<button type='button' title='编辑权限' class='btn btn-info btn-sm change'>" +
                                "<i class='fa fa-recycle'></i>" +
                                "</button>",
                            "targets": -1
                        }
                    ],
                    "createdRow": function (row, data, index) {
                        _powerList.v.list.push(data);
                    },
                    rowCallback: function (row, data) {
                        $('td', row).last().find(".edit").click(function () {
                            _powerList.fn.editInfo(data);
                        });

                        $('td', row).last().find(".change").click(function () {
                            _powerList.fn.toChangePower(data.id);
                        });

                        $('td', row).last().find(".delete").click(function () {
                            _powerList.fn.subDelInfo(data.id);
                        });
                    },
                    "fnServerParams": function (aoData) {
                        _powerList.v.list = [];
                    },
                    "fnDrawCallback": function (data) {
                        $tutu.uiForm(data);
                    }
                });
            },
            editInfo: function (data) {
                $('#roleId').val(data.id);
                $('#roleName').val(data.name);

                $("#roleModal").modal("show");
            },
            addInfo: function () {
                $('#roleId').val('');
                $('#roleName').val('');

                $("#roleModal").modal("show");
            },
            saveInfo: function () {
                let name = $('#roleName').val();

                if (name.trim().length === 0) {
                    info("error", "请输入姓名");
                    return;
                }

                startLoading();

                $.post('backend/power/save', {
                    id: $('#roleId').val(),
                    name: name
                }, function (result) {
                    endLoading();

                    if (result.code === 0) {
                        info("角色信息已保存", "success");

                        $("#roleModal").modal("hide");

                        _powerList.v.list = [];
                        _powerList.v.dTable.DataTable().ajax.reload(null, false);
                    } else {
                        info(result.msg, "error");
                    }
                });
            },
            toChangePower: function (roleId) {
                $.post('backend/power/findListByRoleId', {
                    roleId: roleId
                }, function (result) {
                    let content = '';

                    if (result.length > 0) {
                        for (let i = 0; i < result.length; i++) {
                            content += '<div class="form-group col-4">';
                            if (result[i].status === 0) {
                                content += '<label><input type="checkbox" name="changePower" value="' + result[i].id + '" />&nbsp;&nbsp;' + result[i].name + '</label>';
                            } else {
                                content += '<label><input type="checkbox" name="changePower" checked value="' + result[i].id + '" />&nbsp;&nbsp;' + result[i].name + '</label>';
                            }
                            content += '</div>';
                        }
                    }

                    $('#powerForm').html(content);
                });

                $('#hiddenRoleId').val(roleId);

                $("#powerModal").modal("show");
            },
            savePowerInfo: function () {
                let ids = '';
                $('input[name="changePower"]:checked').each(function () {//遍历每一个名字为changePower的复选框，其中选中的执行函数
                    ids += $(this).val() + ',';//将选中的值添加到数组chk_value中
                });

                startLoading();

                $.post('backend/power/savePower', {
                    id: $('#hiddenRoleId').val(),
                    ids: ids
                }, function (result) {
                    endLoading();

                    if (result.code === 0) {
                        swal("操作成功！", "角色权限修改成功", "success");
                    } else {
                        swal("操作失败！", "角色权限修改失败", "error");
                    }
                    $("#powerModal").modal("hide");
                });
            },
            subDelInfo: function (id) {
                swal({
                    title: "您确定要删除这个角色吗",
                    text: "删除后对应管理员信息将一并删除，且无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的，删除！",
                    cancelButtonText: "不，取消",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function (isConfirm) {
                    if (isConfirm) {
                        startLoading();

                        $.post('backend/power/delete', {
                            id: id
                        }, function (result) {
                            endLoading();

                            if (result.code === 0) {
                                swal("删除成功！", "您已经删除了这个角色。", "success");

                                _powerList.v.list = [];
                                _powerList.v.dTable.DataTable().ajax.reload(null, false);
                            } else {
                                info(result.msg, "error");
                            }
                        });
                    } else {
                        swal("已取消", "您取消了删除操作！", "error");
                    }
                })
            }
        }
    };

    $(document).ready(function () {
        _powerList.fn.init();

        window.onload = function () {
            checkSelectMenu('powerLi');

            loadMenuColor('powerLi');
        }
    });

</script>
</body>
</html>